<template>
  <div class="z-foot">
    <tabbar>
      <tabbar-item :selected="selectedItem === 1" link="/login">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_button.png"> -->
        <span slot="label">我的</span>
      </tabbar-item>
      <tabbar-item :selected="selectedItem === 2" link="/news">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_article.png"> -->
        <span slot="label">新闻</span>
      </tabbar-item>
      <tabbar-item :selected="selectedItem === 3" show-dot>
        <!-- <img slot="icon" src="../assets/demo/icon_nav_msg.png"> -->
        <span slot="label">通知</span>
      </tabbar-item>
      <tabbar-item :selected="selectedItem === 3" badge="2">
        <!-- <img slot="icon" src="../assets/demo/icon_nav_cell.png"> -->
        <span slot="label" selected>News</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import {Tabbar, TabbarItem} from 'vux';
export default {
  props:{
    selectedItem:{
      type: Number,
      default:2,
    }
  },
  data () {
    return {};
  },
  mounted(){},
  components:{
    Tabbar, TabbarItem
  },
  methods:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  // @import "../../assets/style/mixin";
  .z-foot .weui-tabbar{
    position: static;
  }
</style>